﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>族谱网 - 首页</title>


<link href="${ctx}/assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script src="${ctx}/assets/jquery/jquery2.2.4.min.js"></script>
<script src="${ctx}/assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<link href="${ctx}/assets/fs002/fs_0.2.css" rel="stylesheet">
<link href="${ctx}/assets/fitness/all_fit.css" rel="stylesheet">
<link href="${ctx}/assets/fitness/index_fit.css" rel="stylesheet">
<style type="text/css">
.dropbtn {
	background: rgb(248, 119, 9);
	margin-left: 10px;
	color: white;
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	border-top: 1px solid rgb(222, 208, 33);
	border-left: 1px solid rgb(222, 208, 33);
	border-right: 1px solid rgb(222, 208, 33);
	border-radius: 4px 4px 0 0;
	margin-top: 10px;
	/*margin-left: 10px;
    color: #fff;
    background: rgb(248,119,9);
    padding: 10px 20px;
    margin-top: 10px;
    border-top: 1px solid rgb(222,208,33);
    border-left: 1px solid rgb(222,208,33);
    border-right: 1px solid rgb(222,208,33);
    border-radius: 4px 4px 0 0;*/
}

.dropbtn:hover, .dropbtn:focus {
	background-color: rgb(268, 139, 9);
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown a:hover {
	background-color: #f1f1f1
}

.show {
	display: block;
}
#ifr {
	min-height: 625px;
}
</style>
<script type="text/javascript">
	/* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
	function myFunction() {
		document.getElementById("myDropdown").classList.toggle("show");
	}

	// 点击下拉菜单意外区域隐藏
	window.onclick = function(event) {
		if (!event.target.matches('.dropbtn')) {

			var dropdowns = document.getElementsByClassName("dropdown-content");
			var i;
			for (i = 0; i < dropdowns.length; i++) {
				var openDropdown = dropdowns[i];
				if (openDropdown.classList.contains('show')) {
					openDropdown.classList.remove('show');
				}
			}
		}
	}
</script>
</head>
<body>
	<div class="container-fluid zp-topper">
		<div class="row">
			<div class="container">
				<img src="${ctx}/assets/img/logo.png">
			</div>
		</div>
	</div>
	<div class="navbar navbar-default">
		<div class="container">
			<a class="navbar-brand" href="#"></a>
			<div class="collapse navbar-collapse" id="topbar">
				<ul class="nav navbar-nav">
					<!-- <li class=""><a href="${ctx}/">首页</a></li> -->
					<c:if test="${not empty loginUser}">
						<li class=""><a href="${ctx}/index">家学渊源</a></li>
						<li class=""><a href="#">我的博客</a></li>
						<li class=""><a href="#">保存中心</a></li>
					</c:if>
						
	                <!-- <li class=""><a href="${ctx}/list">百家姓</a></li>
	                <li class=""><a href="${ctx}/lyan">留言板</a></li> -->
					<!--  <li class=""><a>搜索查询</a></li> -->
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<c:choose>
						<c:when test="${empty loginUser}">
							<li class=""><a href="${ctx}/sign">登陆账号</a></li>
						</c:when>
						<c:otherwise>
							<div class="dropdown">
								<button onclick="myFunction()" class="dropbtn">${loginUser.name }</button>
								<div id="myDropdown" class="dropdown-content">
								<a href="#">ID:${loginUser.id }</a>
								
								
									 <a href="${ctx }/logout">退出</a>
									 	
								</div>
							</div>
						</c:otherwise>
					</c:choose>
				</ul>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-warning" style="padding-bottom: 30px;">
					<div class="panel-heading">个人信息</div>
					
					<script>
						function changeFrameHeight() {
							var ifr = document.getElementById("ifr");
							ifr.height = document.documentElement.clientHeight;
							console.log(ifr.height);
						}
						window.onresize = function() {
							// 监听div和屏幕的改变 并修改iframe的高度
							changeFrameHeight();

						}
					</script>
					<iframe id="ifr" src="${ctx }/tree"
						onload="this.height=this.contentWindow.document.body.scrollHeight" frameborder="0" align="center"
						width="100%" scrolling="no"> </iframe>
				</div>

			</div>
		</div>
	</div>

	<div class="container-fluid"
		style="background: #fff; padding-top: 10px;">
		<div class="container">
			<div id="footer" style="margin-bottom: 20px;">
				<ul id="copyright" style="margin-left: 0px; line-height: 130%;">
					<div style="width: 300px; margin: 0 auto; padding: 20px 0;">
						<a target="_blank" style="display: inline-block; text-decoration: none; height: 20px; line-height: 20px;"><p
								style="float: left; height: 20px; line-height: 20px; margin: 0px 0px 0px 5px; color: #939393;">粤公网安备
								43018102000107号</p></a>
					</div>
			</div>
		</div>
	</div>

</body>
</html>